import { defineComponent, ref, inject } from 'vue'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import { useTabsStore } from '@/stores/modules/tabs'
import MessageBox from '@/components/nComponents/MessageBox'
import {
  NButton,
  NBreadcrumb,
  NBreadcrumbItem,
  NForm,
  NFormItem,
  NInput
} from 'naive-ui'
import type { lockState } from '@/types/tabs'
import type { FormInst } from 'naive-ui'

export default defineComponent({
  setup() {
    const tabsStore = useTabsStore()
    const {
      getHistory: historyList,
      getLocaks: locks,
      getLeavelOne: leavelOne
    } = storeToRefs(tabsStore)
    const { lockRouter, unlock, setCurrenName, setLeaverOne } = tabsStore

    const router: any = useRouter()
    const $clone = inject('$clone') as <T>(data: T) => T

    /**
     *  解锁
     * */
    const handLast = (index: number) => {
      const info: lockState = locks.value[index]
      const name = info.childer.at(-1).name
      setLeaverOne(info.leavelOne)
      setCurrenName(info.currrenName)
      unlock(index)
      router.push({
        name
      })
    }
    /**
     *  锁分组路由缓存
     * */

    const suoShow = ref(false)
    const formRef = ref<FormInst | null>(null)
    interface formValueState {
      name: string
    }
    const formValue = ref<formValueState>({
      name: ''
    })
    const rules = {
      name: {
        required: true,
        message: '请输入备注',
        trigger: 'blur'
      }
    }
    const handSou = () => {
      const name = $clone(historyList.value)
        .map((el: any) => {
          return el.meta.title
        })
        .join('-')
      formValue.value.name = name
      suoShow.value = true
    }
    const handSave = () => {
      formRef.value?.validate(errors => {
        if (!errors) {
          lockRouter(formValue.value.name, leavelOne.value)
        }
      })
    }
    return () => (
      <>
        <div class='flex items-center ml-2'>
          {locks.value.map((item: any, index: number) => (
            <>
              <div class='drow'>
                <NButton type='primary' onClick={() => handLast(index)}>
                  {item.name}
                </NButton>
              </div>
            </>
          ))}
          <NBreadcrumb class='nav-breadcrumb' separator='>'>
            {historyList.value.map((item: any) => (
              <NBreadcrumbItem>
                <div class='nav-breadcrumb-span'>
                  {item.meta.icon && (
                    <i class={`esayIcon esayIcon-${item.meta.icon}`}></i>
                  )}
                  {item.meta.title && (
                    <span class='ml-1'>{item.meta.title}</span>
                  )}
                </div>
              </NBreadcrumbItem>
            ))}
          </NBreadcrumb>
          <div class='suo ml-[10px] cursor-pointer' onClick={handSou}>
            <i class='esayIcon esayIcon-suoding'></i>
          </div>
        </div>
        <MessageBox v-model={suoShow.value} title='暂存分组' isClose>
          <>
            <NForm
              ref={formRef}
              label-width={80}
              model={formValue.value}
              rules={rules}
            >
              <NFormItem label='备注' path='name'>
                <NInput
                  v-model:value={formValue.value.name}
                  placeholder='请输入暂存租备注'
                />
              </NFormItem>
            </NForm>
            <div class='btns flex align-center justify-end'>
              <NButton
                onClick={() => {
                  suoShow.value = false
                }}
              >
                取消
              </NButton>
              <NButton
                style={{ marginLeft: '10px' }}
                type='primary'
                onClick={handSave}
              >
                提交
              </NButton>
            </div>
          </>
        </MessageBox>
      </>
    )
  }
})
